<script setup lang="ts">
import { toRefs } from 'vue';

const props = defineProps<{
	title: string
	edit?: boolean
}>()
const emit = defineEmits(['change', 'save']);

// const edit = props.edit;
const { edit } = toRefs(props);

const change = (flag: boolean) => {
	// edit.value = !edit.value;
	emit('change', flag);
};

const save = () => {
	emit('save');
	// if (!props.form) return;
	// props.form?.submit().then((res: FormFields) => {
	// 	console.log(res, 'res=======')
	// });
};


</script>

<template>
	<div class="person-detail-item mt20 mb20">
		<a-card>
			<div class="flex justify-between">
				<h3>{{ title }}</h3>
				<a-space>
					<a-button v-show="!edit" @click="change(true)" type="primary">编辑</a-button>
					<a-button v-show="edit" @click="save" type="primary">保存</a-button>
					<a-button v-show="edit" @click="change(false)">取消</a-button>
				</a-space>
			</div>
			<div class="mt10 flex flex-wrap">
				<slot></slot>
			</div>
		</a-card>
	</div>
</template>
<style scoped lang="less">
.person-detail-item {
	:deep(.ant-tabs-nav) {
		margin-bottom: 0;
	}
}
</style>
